<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>Amazium - The responsive web framework..!</title>
	<meta name="description" content="">
	<meta name="author" content="">
	<!--[if lt IE 9]>
		<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	
	<!-- Mobile Specific Metas -->
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> 	
	<!-- CSS -->
	<link rel="stylesheet" href="./base.css">
	
	<!-- Favicons -->
	<link rel="shortcut icon" href="images/favicon.ico">	
	<!-- To Top scripts -->
	<script src="common.js"type="text/javascript" ></script>

</head>
<body>

<div class="row">
	<div class="grid_12">
		<h1>Amazium Examples</h1>
		<hr>
		<p>This page is just an example to get you started in building your own awesome responsive website..!</p>
	</div>
</div>

<div class="row">
	<div class="grid_12">
		<h2><strike>960</strike> 1200 Grid</h2>
		<hr>
	</div>
</div>

<div class="row top">
	<div class="grid_1"><span class="example">1</span></div>
	<div class="grid_1"><span class="example">1</span></div>
	<div class="grid_1"><span class="example">1</span></div>
	<div class="grid_1"><span class="example">1</span></div>
	<div class="grid_1"><span class="example">1</span></div>
	<div class="grid_1"><span class="example">1</span></div>
	<div class="grid_1"><span class="example">1</span></div>
	<div class="grid_1"><span class="example">1</span></div>
	<div class="grid_1"><span class="example">1</span></div>
	<div class="grid_1"><span class="example">1</span></div>
	<div class="grid_1"><span class="example">1</span></div>
	<div class="grid_1"><span class="example">1</span></div>
</div>
<div class="row">
	<div class="grid_4"><span class="example">4</span></div>
	<div class="grid_4"><span class="example">4</span></div>
	<div class="grid_4"><span class="example">4</span></div>
</div>
<div class="row">
	<div class="grid_4"><span class="example">4</span></div>
	<div class="grid_8"><span class="example">8</span></div>
</div>
<div class="row">
	<div class="grid_6"><span class="example">6</span></div>
	<div class="grid_6"><span class="example">6</span></div>
</div>
<div class="row base">
	<div class="grid_12"><span class="example">12</span></div>
</div>

<div class="row">
	<div class="grid_12">
		<h2>Offsetting columns</h2>
		<hr>
	</div>
</div>
<div class="row top">
	<div class="grid_4"><span class="example">4</span></div>
	<div class="grid_4 offset_4"><span class="example">4 with 4 spacing</span></div>
</div>
<div class="row">
	<div class="grid_3 offset_3"><span class="example">3</span></div>
	<div class="grid_3 offset_3"><span class="example">3 with 3 spacing</span></div>
</div>
<div class="row base">
	<div class="grid_8 offset_4"><span class="example">8 with 4 spacing</span></div>
</div>

<div class="row">
	<div class="grid_12">
		<h1>Typography & Bullets</h1>
		<hr />
	</div>
</div>
<div class="row">
	<div class="grid_6">
		<p class="intro">This paragraph is using a class called <code>.intro</code> which makes the font-size & line-height 130% and is perfect introduction text that doesn't need to be a H1.</p>
		<p><a href="#" class="btn">This is a Button..!</a></p>
	</div>
	<div class="grid_3">
		<p><code>&lt;strong&gt;</code> <strong>This text is rendered as bold.</strong></p>
		<p><code>&lt;em&gt;</code> <em>This text is rendered as italicized.</em></p>
		<p><code>&lt;small&gt;</code> <small>This text is rendered for fine print.</small></p>
	</div>
	<div class="grid_3">
		<p><code>&lt;sup&gt;</code> This text is rendered as <sup>Superscript</sup></p>
		<p><code>&lt;sub&gt;</code> This text is rendered as <sub>Subscript</sub></p>
		<p><code>.highlight</code> This text is <span class="highlight">Highlighted</span></sub></p>
	</div>
</div>

<div class="row">
	<div class="grid_12"><hr /></div>
</div>


<div class="row">	
	<div class="grid_3">
		<h4>Normal Bullets (<em>Custom Image</em>)</h4>
		<ul>
			<li>Cras mattis consectetur purus sit amet fermentum.</li>
			<li>
				Donec ullamcorper nulla non metus auctor fringilla.
				<ul>
					<li>Aenean eu leo quam.</li>
					<li>Pellentesque ornare sem lacinia quam venenatis vestibulum.</li>
					<li>Nullam quis risus eget urna mollis ornare vel eu leo.</li>
				</ul>
			</li>
			<li>Maecenas sed diam eget risus varius blandit sit amet non magna.</li>
		</ul>
		<p>For standard <code>&lt;ul&gt;</code> bullet ponts ive replace the normal dot with a graphic which can be changes easily</p>
		<blockquote>
			&lt;ul&gt;<br />
			<span></span>&lt;li&gt;Your text here&lt;/li&gt;<br />
			&lt;/ul&gt;
		</blockquote>
	</div>
	
	<div class="grid_3">
		<h4>Ordered Bullets</h4>
		<ol class="square">
			<li>Cras mattis consectetur purus sit amet fermentum.</li>
			<li>
				Donec ullamcorper nulla non metus auctor fringilla.
				<ol>
					<li>Aenean eu leo quam.</li>
					<li>Pellentesque ornare sem lacinia quam venenatis vestibulum.</li>
					<li>Nullam quis risus eget urna mollis ornare vel eu leo.</li>
				</ol>
			</li>
			<li>Maecenas sed diam eget risus varius blandit sit amet non magna.</li>
		</ol>
		<p>As with <code>&lt;ul&gt;</code> the ordered lists <code>&lt;ol&gt;</code> have had some extra CSS added to them so they are that little bit nicer to look at.</p>
		<blockquote>
			&lt;ol&gt;<br />
			<span></span>&lt;li&gt;Your text here&lt;/li&gt;<br />
			&lt;/ol&gt;
		</blockquote>
	</div>

	<div class="grid_3">
		<h4>Round Bullets</h4>
		<ul class="circle">
			<li>Cras mattis consectetur purus sit amet fermentum.</li>
			<li>
				Donec ullamcorper nulla non metus auctor fringilla.
				<ul>
					<li>Aenean eu leo quam.</li>
					<li>Pellentesque ornare sem lacinia quam venenatis vestibulum.</li>
					<li>Nullam quis risus eget urna mollis ornare vel eu leo.</li>
				</ul>
			</li>
			<li>Maecenas sed diam eget risus varius blandit sit amet non magna.</li>
		</ul>
		<p>For circular bullet point all you need to do is add the class <code>.circle</code> to the  <code>&lt;ul&gt;</code></p>
		<blockquote>
			&lt;ul class="circle"&gt;<br />
			<span></span>&lt;li&gt;Your text here&lt;/li&gt;<br />
			&lt;/ul&gt;
		</blockquote>
	</div>
	
	<div class="grid_3">
		<h4>Square Bullets</h4>
		<ul class="square">
			<li>Cras mattis consectetur purus sit amet fermentum.</li>
			<li>
				Donec ullamcorper nulla non metus auctor fringilla.
				<ul>
					<li>Aenean eu leo quam.</li>
					<li>Pellentesque ornare sem lacinia quam venenatis vestibulum.</li>
					<li>Nullam quis risus eget urna mollis ornare vel eu leo.</li>
				</ul>
			</li>
			<li>Maecenas sed diam eget risus varius blandit sit amet non magna.</li>
		</ul>
		<p>For square bullet point all you need to do is add the class <code>.square</code> to the <code>&lt;ul&gt;</code></p>
		<blockquote>
			&lt;ul class="square"&gt;<br />
			<span></span>&lt;li&gt;Your text here&lt;/li&gt;<br />
			&lt;/ul&gt;
		</blockquote>
	</div>
</div>

<div class="row">
	<div class="grid_12">
		<hr />
		<a name="forms-tables"></a>
		<h1>Forms & Tables</h1>
		<div class="row">
			<div class="grid_6">
				<h3>Form</h3>
				<div id="stylized-form">
					<form id="form" name="form" method="post" action="index.html">		
						<div class="wrapper-block">
							<label>Last Name:<span class="small-label">Add your last name</span></label>
							<input type="text" name="name" id="name" />
						</div>
						<div class="wrapper-block">
							<label for="user">This is a Drop down:<span class="small-label">Please select one option</span></label>
							<select id="dropdown">
								<option>Select something...</option>
								<option>Drop down 01</option>
								<option>Drop down 02</option>
							</select>
						</div>
						<div class="wrapper-block">
							<label for="comments">Radio Buttons</label>
							<input type="radio" name="radio1" />Yes
							<input type="radio" name="radio2" />No
						</div>
						<div class="wrapper-block">
							<label for="comments">Check Boxes</label>
							<input type="checkbox" name="checkbox1" />One
							<input type="checkbox" name="checkbox2" />Two
						</div>
						<div class="wrapper-block">
							<label for="comments">Feedback:<span class="small-label">You can write your comments here</span></label>
							<textarea id="comments" rows="3" cols="10"></textarea>
						</div>
						<input type="submit" value="Submit" class="submit btn-form" />
					</form>
				</div>
			</div>
			<div class="grid_6">
				<h3>Table</h3>
				<table>
					<tr>
						<th class="first last" colspan="4">Title</th>
					</tr>
					<tr>
						<th class="first">Item:</th>
						<th>Category:</th>
						<th>Description:</th>
						<th class="last">Size:</th>
					</tr>
					<tr class="even">
						<td class="first">Bananas</td>
						<td>Fruit</td>
						<td>Desc</td>
						<td class="last">1KG</td>
					</tr>
					<tr class="odd">
						<td class="first">Apples</td>
						<td>Fruit</td>
						<td>Desc</td>
						<td class="last">3KG</td>
					</tr>
					<tr class="even">
						<td class="first">Oranges</td>
						<td>Fruit</td>
						<td>Desc</td>
						<td class="last">2.5KG</td>
					</tr>
					<tr class="odd">
						<td class="first">Mango</td>
						<td>Fruit</td>
						<td class="highlight">Desc</td>
						<td class="last">6KG</td>
					</tr>
				</table>
				<p>In Amazium I've included some styling for table elements like Table Headings (TH) and the option to have odd and even table rows as well as the ability to highlight a cell in your table..!</p>
			</div>
		</div>
		<hr />
	</div>
</div>

</body>
</html>